<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Peaks.js Demo Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="titles">
      <h1>Peaks.js</h1>
      <p>
        Peaks.js is a JavaScript library that allows you to display and
        interact with audio waveforms in the browser.
      </p>

      <h2>Demo pages</h2>
      <p>
        The following pages demonstrate various configuration options:
      </p>
      <p>
        <a href="/index.html">Precomputed Waveform Data</a> |
        <a href="/webaudio.html">Web Audio API</a> |
        <a href="/zoomable-waveform.html">Single Zoomable Waveform</a> |
        <a href="/overview-waveform.html">Single Fixed Waveform</a> |
        <a href="/cue-events.html">Cue Events</a> |
        Changing the Media URL |
        <a href="/multi-channel.html">Multi-Channel Waveform</a> |
        <a href="/custom-markers">Custom Point and Segment Markers</a> |
        <a href="/overlay-segments.html">Overlay Segments</a> |
        <a href="/external-player.html">External Audio Player</a> |
        <a href="/scrollbar.html">Scrollbar</a>
      </p>
      <h2>Demo: Changing the Media URL</h2>
      <p>
        This demo shows how to change the media URL and update the waveform,
        using the three different methods of providing waveform data to Peaks.js:
      </p>
      <ul>
        <li>Fetching pre-computed waveform data from a web server (<code>dataUri</code> option)</li>
        <li>Computing in the browser using the Web Audio API (<code>webAudio</code> option)</li>
        <li>Passing waveform data directly to the Peaks instance (<code>waveformData</code> option)</li>
      </ul>
    </div>

    <div class="waveform-container">
      <div id="zoomview-container"></div>
    </div>
    <div class="waveform-container">
      <div id="overview-container"></div>
    </div>

    <div id="demo-controls">
      <audio id="audio" controls="controls">
        <source src="/TOL_6min_720p_download.mp3" type="audio/mpeg">
        <source src="/TOL_6min_720p_download.ogg" type='audio/ogg; codecs="vorbis"'>
        Your browser does not support the audio element.
      </audio>

      <div id="controls">
        <div>
          <button data-action="zoom-in">Zoom in</button>
          <button data-action="zoom-out">Zoom out</button>
          <label for="select-audio">Select audio:</label>
          <select id="select-audio"></select>
        </div>
      </div>
    </div>

    <script src="/peaks.js"></script>
    <script>
      (function(Peaks) {
        var AudioContext = window.AudioContext || window.webkitAudioContext;
        var audioContext = new AudioContext();

        function requestWaveformData(url) {
          return fetch(url)
            .then(function(response) {
              return response.arrayBuffer();
            });
        }

        function createSources(waveformData) {
          return [
            {
              title: 'Tree of Life',
              mediaUrl: '/TOL_6min_720p_download.mp3',
              dataUri: {
                arraybuffer: 'TOL_6min_720p_download.dat',
                json: 'TOL_6min_720p_download.json'
              }
            },
            {
              title: 'Desert Island Discs',
              mediaUrl: '/sample.mp3',
              webAudio: {
                audioContext: audioContext
              },
              zoomLevels: [128, 256]
            },
            {
              title: 'BBC Sound Effect (Cars)',
              mediaUrl: '/07023003.mp3',
              waveformData: {
                arraybuffer: waveformData
              }
            }
          ];
        }

        function createPeaksInstance(options) {
          return new Promise(function(resolve, reject) {
            Peaks.init(options, function(err, peaksInstance) {
              if (err) {
                reject(err);
              }
              else {
                console.log('Peaks instance ready');

                return resolve(peaksInstance);
              }
            });
          });
        }

        function bindEventHandlers(peaksInstance, sources) {
          document.querySelector('[data-action="zoom-in"]').addEventListener('click', function() {
            peaksInstance.zoom.zoomIn();
          });

          document.querySelector('[data-action="zoom-out"]').addEventListener('click', function() {
            peaksInstance.zoom.zoomOut();
          });

          var select = document.getElementById('select-audio');

          for (var i = 0; i < sources.length; i++) {
            select.options[i] = new Option(sources[i].title, i);
          }

          select.addEventListener('change', function(event) {
            var source = sources[event.target.value];

            peaksInstance.setSource(source, function(error) {
              if (error) {
                console.error('setSource error', error);
              }
            });
          });
        }

        function errorHandler(err) {
          console.error(err.message);
        }

        var options = {
          zoomview: {
            container: document.getElementById('zoomview-container')
          },
          overview: {
            container: document.getElementById('overview-container')
          },
          mediaElement: document.getElementById('audio'),
          dataUri: {
            arraybuffer: '/TOL_6min_720p_download.dat',
            json: '/TOL_6min_720p_download.json'
          },
          keyboard: true,
          pointMarkerColor: '#006eb0',
          showPlayheadTime: true,
          zoomLevels: [512, 1024, 2048]
        };

        createPeaksInstance(options)
          .then(function(peaksInstance) {
            requestWaveformData('/07023003-2channel.dat')
              .then(function(waveformData) {
                return createSources(waveformData);
              })
              .then(function(sources) {
                bindEventHandlers(peaksInstance, sources);
              }, errorHandler);
          }, errorHandler);
      })(peaks);
    </script>
  </body>
</html>
